require('./Found.styl');
import {Boxs, CheckboxField, Group, TextareaField} from 'saltui';
import Imgup from './../../components/imgup';
import {PropTypes} from "prop-types";

let HBox = Boxs.HBox;
let Box = Boxs.Box;

class Found extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      wtlx: '',
    }
  }

  wtmsChange(value) {
    this.props.onWtmsChange({
      index: this.props.index,
      wtms: value
    })
  }

  wtmsBlur() {
    this.props.onWtmsBlur({
      index: this.props.index,
      wtms: event.target.value
    })
  }

  wtlxChange(data) {
    console.log(data);
    this.props.onWtlxSelect({
      index: this.props.index,
      wtlx: data
    });
  }

  componentWillMount() {
    console.log(this.props.wt.wtlx);
    let tmp = [];
    this.props.wt.wtlx.map((v, k) => {

      if (v.checked) {
        tmp.push(v.text);
      }
    });

    this.setState({wtlx: tmp.join(';')})
  }

  render() {

    let imgs = [];

    return (
      <div className="found">

        <Group.Head>
          <HBox>
            <Box flex={1}><span style={{fontSize: '14px'}}>发现问题</span>({this.props.index + 1})</Box>
            {!this.props.readOnly && <Box onClick={(e) => {
              this.props.onWtDel(this.props.index);
            }}
                                          style={{color: '#0db0f0', width: '60px'}}>
              <span style={{fontSize: '13px'}}>删除</span></Box>}
          </HBox>
        </Group.Head>

        <Group.List>
          {!this.props.readOnly ?
            <CheckboxField label="问题类型" data={this.props.wt.wtlx} onChange={this.wtlxChange.bind(this)}
                           placeholder={this.props.readOnly ? '' : '请选择'}
                           maskCloseable={true} readOnly={this.props.readOnly}
                           groupListArgument={{lineIndent: 15, itemIndent: 15}}
                           mode="slot" required={false}/>

            : <TextareaField label="问题类型" minRows={1} maxRows={5}
                             readOnly={this.props.readOnly}
                             value={this.state.wtlx}
                             placeholder={this.props.readOnly ? '' : '请输入文字'}
            />
          }
        </Group.List>
        <Group.List>
          <TextareaField label="问题描述" minRows={1} maxRows={7} onChange={this.wtmsChange.bind(this)}
                         readOnly={this.props.readOnly}
                         value={this.props.wt.wtms}
                         placeholder={this.props.readOnly ? '' : '请输入文字'}
          />
        </Group.List>
        <Group.List>
          <Imgup images={this.props.wt.images} onImgSelect={this.props.onImgSelect}
                 readOnly={this.props.readOnly}
                 onImgDel={this.props.onImgDel} index={this.props.index}/>
        </Group.List>
      </div>
    );
  }
}

Found.contextTypes = {
  wt: PropTypes.object,
  index: PropTypes.object,
  readOnly: PropTypes.bool,
  onWtDel: PropTypes.func,
  onWtmsChange: PropTypes.func,
  onWtlxSelect: PropTypes.func,
  onImgSelect: PropTypes.func,
  onImgDel: PropTypes.func,
  onFileSelect: PropTypes.func,
  onFileDel: PropTypes.func,

};

module.exports = Found;
